<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情 - 知识社区</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <style>
        :root {
            --primary-color: #2A2A72;
            --secondary-color: #009FFD;
            --accent-color: #FFA400;
            --text-color: #2C3E50;
            --bg-color: #f5f7fa;
            --card-bg: white;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] {
            --primary-color: #6C63FF;
            --secondary-color: #4A90E2;
            --accent-color: #FF8966;
            --text-color: #E0E0E0;
            --bg-color: #1A1A1A;
            --card-bg: #2D2D2D;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            transition: background 0.3s ease;
        }

        /* 导航栏 */
        .nav-container {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(var(--card-bg), 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-link {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 0.5rem;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--secondary-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* 详情页样式 */
        .article-detail {
            max-width: 800px;
            margin: 100px auto 2rem;
            padding: 2rem;
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .article-detail.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .article-header {
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 1.5rem;
            margin-bottom: 2rem;
            position: relative;
        }

        .article-header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        }

        .article-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .article-meta {
            display: flex;
            gap: 1.5rem;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        .article-content {
            line-height: 1.8;
            font-size: 1.1rem;
        }

        .article-content p {
            margin: 1.5rem 0;
        }

        .article-content img {
            width: 100%;
            border-radius: 12px;
            margin: 2rem 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .article-content img:hover {
            transform: scale(1.02);
        }

        pre code.hljs {
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
            border: 1px solid rgba(var(--secondary-color), 0.1);
            background: var(--bg-color);
            overflow-x: auto;
        }

        blockquote {
            border-left: 4px solid var(--accent-color);
            padding: 1rem 2rem;
            margin: 1.5rem 0;
            background: rgba(var(--accent-color), 0.1);
            border-radius: 0 8px 8px 0;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: var(--secondary-color);
            color: white;
            border-radius: 8px;
            text-decoration: none;
            transition: transform 0.3s ease;
            margin-bottom: 2rem;
        }

        .back-button:hover {
            transform: translateX(-5px);
        }

        .theme-toggle {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--secondary-color);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            border: none;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .article-detail {
                margin: 80px 1rem 2rem;
                padding: 1.5rem;
            }

            .article-title {
                font-size: 2rem;
            }

            .article-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <nav>
            <h1>知识社区</h1>
            <div class="nav-links">
                <a href="#" class="nav-link">博客文章</a>
                <a href="#" class="nav-link">问答社区</a>
            </div>
        </nav>
    </div>

    <main>
        <section class="article-detail">
            <a href="#" class="back-button">← 返回列表</a>
          
            <div class="article-header">
                <h1 class="article-title">前端框架对比分析</h1>
                <div class="article-meta">
                    <span>作者：技术社区</span>
                    <span>发布日期：2023-08-20</span>
                    <span>阅读时间：12分钟</span>
                </div>
            </div>

            <article class="article-content">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png" 
                     alt="Vue.js框架" 
                     style="max-width: 200px; margin: 1rem auto; display: block;">

                <p>在当今快速发展的前端开发领域，Vue、React和Angular作为三大主流框架，各自展现出独特的优势...</p>

                <h3>核心架构对比</h3>
                <pre><code class="language-javascript">// 框架选择示例
import React, { useState } from 'react';

function FrameworkSelector() {
  const [framework, setFramework] = useState('React');

  return (
    &lt;div&gt;
      &lt;button onClick={() => setFramework('React')}&gt;React&lt;/button&gt;
      &lt;button onClick={() => setFramework('Vue')}&gt;Vue&lt;/button&gt;
      &lt;p&gt;当前选择：{framework}&lt;/p&gt;
    &lt;/div&gt;
  );
}</code></pre>

                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png" 
                     alt="React框架" 
                     style="max-width: 150px; margin: 1rem auto; display: block;">

                <blockquote>
                    "选择合适的框架需要综合考虑项目规模、团队经验和生态成熟度"
                </blockquote>
            </article>
        </section>
    </main>

    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script>
        // 初始化代码高亮
        hljs.highlightAll();

        // 主题切换
        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
          
            // 更新代码高亮主题
            const hljsLink = document.querySelector('#hljs-theme');
            if (hljsLink) {
                hljsLink.href = newTheme === 'dark' 
                    ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css'
                    : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css';
            }
        }

        // 滚动动画
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.article-detail').forEach(section => {
            observer.observe(section);
        });

        // 返回按钮
        document.querySelector('.back-button').addEventListener('click', function(e) {
            e.preventDefault();
            window.history.back();
        });

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', savedTheme);
    </script>
</body>
</html>